<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo11</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
  </head>

  <body>
    <div id="app"></div>
  </body>
  <script>
    const app = Vue.createApp({
      template: ` 
        <async-component/>
        `,
    });
    app.component(
      "async-component",
      Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              template: `<div>这是一个异步组件</div>`,
            });
          }, 3000);
        });
      })
    );
    const vm = app.mount("#app");
  </script>
</html>
async-component